@import "./base.less";

.@{css-prefix}.input {
  font-size: @base-font-size;
  position: relative;
  font-weight: 400;
  display: inline-block;
  color: rgba(0,0,0,.87);
  vertical-align: baseline;

  > i {
    .icon-right;
  }

  &.left {
    > i {
      right: auto;
      left: 1px;
      border-radius: @border-radius 0 0 @border-radius;
    }
    > input {
      padding-left: 2.6em;
    }
  }
  &.right > input {
    padding-right: 2.6em;
  }

  &.transparent input{
    border-color: transparent!important;
    background-color: transparent!important;
    padding: 0!important;
    box-shadow: none!important;
    border-radius: 0!important;
  }

  &.loading {
    > i:before {
      position: absolute;
      content: '';
      top: 50%;
      left: 50%;
      margin: -0.6em 0em 0em -0.6em;
      width: 1.2em;
      height: 1.2em;
      border-radius: 500rem;
      border: 0.2em solid rgba(0, 0, 0, 0.1);
    }
    > i:after {
      position: absolute;
      content: '';
      top: 50%;
      left: 50%;
      margin: -0.6em 0em 0em -0.6em;
      width: 1.2em;
      height: 1.2em;
      -webkit-animation: button-spin 0.6s linear;
      animation: button-spin 0.6s linear;
      -webkit-animation-iteration-count: infinite;
      animation-iteration-count: infinite;
      border-radius: 500rem;
      border-color: #767676 transparent transparent;
      border-style: solid;
      border-width: 0.2em;
      box-shadow: 0px 0px 0px 1px transparent;
    }
  }

  > input, > textarea {
    z-index: 1;
    margin: 0;
    max-width: 100%;
    flex: 1 0 auto;
    outline: 0;
    -webkit-tap-highlight-color: rgba(255,255,255,0);
    text-align: left;
    line-height: @line-height;
    padding: @input-padding;
    background: #fff;
    border: 1px solid @input-border-color;
    //border: 0;
    border-radius: @border-radius;
    transition: box-shadow .1s ease,border-color .1s ease;
    box-shadow: @input-box-shadow;

    &:focus {
      border-color: @input-active-color;
      //box-shadow: 0 0 0 1px rgba(16,142,233,.8);
      color: rgba(0,0,0,.9);
    }

  }

  // size
  &.mini {
    .size-mini;
  }
  &.tiny {
    .size-tiny;
  }
  &.small {
    .size-small;
  }
  &.medium {
    .size-medium;
  }
  &.large {
    .size-large;
  }
  &.big {
    .size-large;
  }
  &.huge {
    .size-huge;
  }
  &.massive {
    .size-massive;
  }

  &.disabled {
    .disabled;
  }

}
